<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
        }

        p {
            overflow: hidden;
            position: relative;
        }

        .p-after::after {
            content: '...';
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 40px;
            margin-left: 40px;
            z-index: 100;
            display: block;
        }

    </style>
</head>

<body>
    <p>afdafffffffffffffffdsssssssssssssssssssssssssssssssssssssssssssssssssggggggggggggggggggdfssssssssssssdafww</p>
    <script>
        $(function() {
            //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
            $('p').each(function(i, obj) {
                var lineHeight = parseInt($(this).css("line-height"));
                var height = parseInt($(this).height());
                if ((height / lineHeight) > 3) {
                    $(this).addClass("p-after")
                    $(this).css("height", "55px");
                } else {
                    $(this).removeClass("p-after");
                }
            });
        })

    </script>
</body>

</html>
